//引入字体图标样式
require("../../assets/fonts/iconfont.css");
//引入axios
const axios = require("../../assets/js/axios.js");
//引入自定义js
const echarts = require("echarts");
let obj = require("../../assets/js/my.js");
let $ = obj.$;
let load = obj.load;
//引入自己的样式
require("./motion_data.less");

load(async function () {
	//1.获取个人数据
	let res = await axios.get("/api/user/info");
	let data = res.data.data;
	// 渲染页面
	$("#timeToatl").textContent = data.duration;
	$("#kilocalorie").textContent = data.calorie;
	$("#imgTitle").src = "http://fitness.h5.itsource.cn:3701" + data.imgUrl;
	// 柱形图的函数
	//1.运动数据
	let res1 = await axios.get("/api/exercise");
	let data1 = res1.data.data;
	$("#calorie").textContent = data1.sum7Meter;
	$("#day").textContent = data1.days.length;
	$("#tday").textContent = data1.days.length;
	// console.log(data1);
	// 2.数据近七天日期
	let arrDate = data1.days.map((v) => v.date.slice(5));
	let arrmeter = data1.days.map((v) => v.sumDuration);
	// console.log(arrDate);
	const myChart = echarts.init($("#box"));
	const option = {
		grid: {
			left: 50,
		},
		title: {
			text: "近7天运动时长",
			textStyle: {
				fontSize: 12,
				color: "#333",
			},
			left: 10,
			top: 10,
		},
		xAxis: {
			type: "category",
			data: arrDate,
			textStyle: {
				fontSize: 12,
				color: "#333",
			},
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: arrmeter,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(220,220,220,0.8)",
				},
				itemStyle: {
					color: "#83A7D1",
				},
			},
		],
	};
	let mydata1 = 0;
	let mydata2 = 0;
	let mydata3 = 0;
	data1.days.forEach((v) => {
		mydata1 += v.exerciseData[0].duration;
		mydata2 += v.exerciseData[1].duration;
		mydata3 += v.exerciseData[2].duration;
	});
	myChart.setOption(option);
	function drawPie() {
		const chart = echarts.init($("#weekSportCategory"));
		const option = {
			title: {
				text: "运动分类",
				textStyle: {
					fontSize: 12,
					color: "#333",
				},
				left: 10,
				top: 10,
			},
			tooltip: {
				trigger: "item",
				formatter: "{b}:{c}({d}%)",
			},
			legend: {
				orient: "vertical",
				left: 20,
				top: "middle",
				data: ["跑步", "骑行", "训练"],
				icon: "roundRect",
				itemWidth: 10,
				itemHeight: 10,
			},
			series: [
				{
					name: "运动分类",
					type: "pie",
					radius: "55%",
					center: ["50%", "60%"],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 255, 0.5)",
						},
					},
					data: [
						{ value: mydata1, name: "跑步", itemStyle: { color: "#58BB92" } },
						{ value: mydata2, name: "骑行", itemStyle: { color: "#736171" } },
						{ value: mydata3, name: "训练", itemStyle: { color: "#EE5C43" } },
					],

					label: {
						color: "#fff",
						show: true,
						position: "inside",
						formatter: "{d}%",
					},
				},
			],
		};
		chart.setOption(option);
	}
	drawPie();
	//3.柱形图
	let my3data1 = data1.days.map((v) => v.exerciseData[0].meter);
	let my3data2 = data1.days.map((v) => v.exerciseData[1].meter);
	let my3data3 = data1.days.map((v) => v.exerciseData[2].meter);
	// console.log(my3data1, my3data2, my3data3);
	const myChart3 = echarts.init($("#weekSport"));

	myChart3.setOption({
		title: {
			text: "近七日运动分类",
			textStyle: {
				fontSize: 12,
			},
			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		legend: {
			left: "right",
			top: 15,
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
			width: 280,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: arrDate,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: my3data1,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: my3data2,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: my3data3,
			},
		],
	});
	//4.折线图
	let count = data1.days.map((v) => v.count);
	const myChart4 = echarts.init($("#broken"));

	myChart4.setOption({
		title: {
			text: "近七天训练次数",
			textStyle: {
				fontSize: 12,
			},
			left: 10,
			top: 10,
		},
		xAxis: {
			type: "category",
			data: arrDate,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: count,
				type: "line",
			},
		],
	});
	//5.回退
	$(".icon-zuojiantou").addEventListener("click", function () {
		history.back();
	});
});
